<!--中国区域热力图（已弃用）-->

<template>
  <div class="w-h-full">
    <div v-if="shade" class="shade"></div>
    <span class="color-red" style="position: absolute;">此组件已不建议使用，请切换使用中国省份地图</span>
    <div v-resize="resizeHandle" style="width: 100%; height: 100%;">
      <div :id="'chart-'+component.id+'-'+chartDomNum" class="w-h-full"></div>
    </div>
  </div>
</template>

<script>

  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import ChartCompMixin from '@/mixin/ChartCompMixin'
  import PnDesigner from '@/utils/PnDesigner'

  const _this = {
    name: 'ChinaAreaHeatMapChart',
    mixins: [FuncCompMixin, ChartCompMixin],
    attr: {
      version: '1.0',
      configDataTemp: Object.assign({

        chartOption: {
          visualMap: {
            type: 'piecewise',
            show: true,
            min: 0,
            max: 1200,
            left: 10,
            bottom: 10,
            showLabel: true,
            text: ["高", "低"],
            textStyle: {
              color: '#fff'
            },
            pieces: [
              {
                gt: 100,
                label: "> 100 人",
                color: "#7f1100"
              },
              {
                gte: 10,
                lte: 100,
                label: "10 - 100 人",
                color: "#ff5428"
              },
              {
                gte: 1,
                lt: 10,
                label: "1 - 9 人",
                color: "#ff8c71"
              },
              {
                value: 0,
                label: '无',
                color: "#ffffff"
              },
              {
                gt: 0,
                lt: 1,
                label: "疑似",
                color: "#ffd768"
              },

            ]
          },
          geo: {
            roam: false,
            label: {
              normal: {
                show: true,
                color: '#222'
              },
              emphasis: {
                color: '#222'
              }
            },
            itemStyle: {
              normal: {
                areaColor: '',
                shadowColor: '',
                shadowBlur: 1,
                borderWidth: 0,
                borderColor: '',
                opacity: 1
              },
              emphasis: {
                areaColor: '#f2d5ad',
                shadowColor: '',
                shadowBlur: 1,
                borderWidth: 0,
                borderColor: '',
                opacity: 1
              }
            }
          },
          series: {
            name: '确诊病例（非真实数据）'
          }
        },

      }, PnDesigner.buildFuncCompDatasourceField({
        ds_resultObjTemplate: [
          {
            field: 'name',
            remark: '地名'
          },
          {
            field: 'value',
            remark: '值'
          }
        ],
        ds_resultObj: [
          {
            name: "南海诸岛",
            value: 0
          },
          {
            name: '北京',
            value: 400
          },
          {
            name: '天津',
            value: 230
          },
          {
            name: '上海',
            value: 520
          },
          {
            name: '重庆',
            value: 189
          },
          {
            name: '河北',
            value: 57
          },
          {
            name: '河南',
            value: 890
          },
          {
            name: '云南',
            value: 645
          },
          {
            name: '辽宁',
            value: 748
          },
          {
            name: '黑龙江',
            value: 4
          },
          {
            name: '湖南',
            value: 8
          },
          {
            name: '安徽',
            value: 100
          },
          {
            name: '山东',
            value: 888
          },
          {
            name: '新疆',
            value: 90
          },
          {
            name: '江苏',
            value: 31
          },
          {
            name: '浙江',
            value: 104
          },
          {
            name: '江西',
            value: 36
          },
          {
            name: '湖北',
            value: 1023
          },
          {
            name: '广西',
            value: 33
          },
          {
            name: '甘肃',
            value: 7
          },
          {
            name: '山西',
            value: 9
          },
          {
            name: '内蒙古',
            value: 7
          },
          {
            name: '陕西',
            value: 22
          },
          {
            name: '吉林',
            value: 4
          },
          {
            name: '福建',
            value: 18
          },
          {
            name: '贵州',
            value: 5
          },
          {
            name: '广东',
            value: 98
          },
          {
            name: '青海',
            value: 1
          },
          {
            name: '西藏',
            value: 0
          },
          {
            name: '四川',
            value: 44
          },
          {
            name: '宁夏',
            value: 4
          },
          {
            name: '海南',
            value: 22
          },
          {
            name: '台湾',
            value: 3
          },
          {
            name: '香港',
            value: 5
          },
          {
            name: '澳门',
            value: 5
          }
        ],
        ds_useFilter: true,
        ds_useTimer: true,
      }), PnDesigner.buildFuncCompGlobalField(), PnDesigner.buildEchartCompCustomOption())
    },
    data() {
      return {}
    },
    mounted() {
      this.$PnApi.MapGeoJsonApi.getGeoJsonByAdCode('100000').then(result => {
        this.$Echarts.registerMap('100000', result.data);
        this.init();
      })

      this.setTimer(() => {
        this.init()
      })
    },
    methods: {

      init() {
        this.initDatasource(() => {
          this.chart.setOption(this.chartOption);
          this.runCustomGlobalJsCode();
          this.runDataItemClickJsCode()
        }, (result) => {
          this.chart.setOption(this.chartOption);
          this.runCustomGlobalJsCode();
          this.runDataItemClickJsCode()
        });
      },

    },
    computed: {
      chartOption() {

        let option = {
          tooltip: {
            triggerOn: "mousemove",
            /*formatter: function (e, t, n) {
              return .5 == e.value ? e.name + "：有疑似病例" : e.seriesName + "<br />" + e.name + "：" + e.value
            }*/
          },
          visualMap: {
            type: this.component.compConfigData.chartOption.visualMap.type,
            show: this.component.compConfigData.chartOption.visualMap.show,
            min: this.component.compConfigData.chartOption.visualMap.min,
            max: this.component.compConfigData.chartOption.visualMap.max,
            left: this.component.compConfigData.chartOption.visualMap.left,
            bottom: this.component.compConfigData.chartOption.visualMap.bottom,
            showLabel: this.component.compConfigData.chartOption.visualMap.showLabel,
            text: this.component.compConfigData.chartOption.visualMap.text,
            textStyle: {
              color: this.component.compConfigData.chartOption.visualMap.textStyle.color
            },
            pieces: this.component.compConfigData.chartOption.visualMap.pieces
          },
          geo: {
            map: "100000",
            roam: this.component.compConfigData.chartOption.geo.roam,
            scaleLimit: {
              min: 1,
              max: 2
            },
            zoom: 1.0,
            // top: 120,
            label: {
              normal: {
                show: this.component.compConfigData.chartOption.geo.label.normal.show,
                color: this.component.compConfigData.chartOption.geo.label.normal.color
              },
              emphasis: {
                color: this.component.compConfigData.chartOption.geo.label.emphasis.show
              }
            },
            itemStyle: {
              normal: {
                areaColor: this.component.compConfigData.chartOption.geo.itemStyle.normal.areaColor,
                shadowColor: this.component.compConfigData.chartOption.geo.itemStyle.normal.shadowColor,
                shadowBlur: this.component.compConfigData.chartOption.geo.itemStyle.normal.shadowBlur,
                borderWidth: this.component.compConfigData.chartOption.geo.itemStyle.normal.borderWidth,
                borderColor: this.component.compConfigData.chartOption.geo.itemStyle.normal.borderColor,
                opacity: this.component.compConfigData.chartOption.geo.itemStyle.normal.opacity,
              },
              emphasis: {
                areaColor: this.component.compConfigData.chartOption.geo.itemStyle.emphasis.areaColor,
                shadowColor: this.component.compConfigData.chartOption.geo.itemStyle.emphasis.shadowColor,
                shadowBlur: this.component.compConfigData.chartOption.geo.itemStyle.emphasis.shadowBlur,
                borderWidth: this.component.compConfigData.chartOption.geo.itemStyle.emphasis.borderWidth,
                borderColor: this.component.compConfigData.chartOption.geo.itemStyle.emphasis.borderColor,
                opacity: this.component.compConfigData.chartOption.geo.itemStyle.emphasis.opacity,
              }
            }
          },
          series: [{
            name: this.component.compConfigData.chartOption.series.name,
            type: "map",
            geoIndex: 0,
            data: []
          }]
        };

        option.series[0].data = this.runCustomFilter(this.component.compConfigData.ds_resultObj);

        // 下面这一段代码用于合并组件的扩展配置，如果组件不需要扩展配置，可以删掉
        option = this.$PnDesigner.mergeChartCustomOption(option, this.component.compConfigData.customOption);

        return option;
      }
    },
    watch: {}
  };

  export default _this
</script>

<style scoped>

</style>
